<template>
	<view class="container">
		<view class="buttons">
			<view class="button" :class="{buttonselect:current==0}" @click="current=0"> 苹果 </view>
			<view class="button" :class="{buttonselect:current==1}" @click="current=1"> 安卓 </view>
		</view>
		<swiper :interval="3000" :current="current" :duration="1000" class="swiper" @change="changeSwiper">
			<swiper-item>
				<view class="swiper-item">
					<rich-text :nodes="ios.content"></rich-text>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<rich-text :nodes="android.content"></rich-text>
				</view>
			</swiper-item>
		</swiper>

	</view>
</template>

<script>
	import {
		getPageData
	} from '@/api/index.js';
	export default {

		data() {
			return {
				buttonselect: true,
				current: 0,
				ios: {},
				android: {}
			}
		},
		onShow() {
			this.init()
		},
		methods: {
			init() {

				getPageData({
					data: {
						name: "ios_instructions"
					}
				}).then(res => {
					if (res.code == 1) {
						this.ios = res.data
					}
				})

				getPageData({
					data: {
						name: "android_instructions"
					}
				}).then(res => {
					if (res.code == 1) {
						console.log(res.data)
						this.android = res.data
					}
				})
			},

			changeSwiper(event) {
				console.log(event);
				this.current = event.detail.current
				console.log(this.current);
				// event.detail = {
				// 	current: current,
				// 	source: source
				// }
			}
		}

	}
</script>
<style lang="scss" scoped>
	.container {
		.buttons {
			height: 90upx;
			display: flex;

			.button {
				flex: 1;
				background-color: #e3e3e3;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.buttonselect {
				background-color: #1e90ff;
				color: #fff;
			}
		}

		.swiper {
			min-height: 100vh;
			width: 100%;

			.swiper-item {
				width: 100%;
				padding: 30upx;
			}

		}

	}
</style>
